<template>
  <template
    v-if="
      item.type === TableColumnOrFormTypeEnum.INPUT ||
      item.type === TableColumnOrFormTypeEnum.TEXTAREA ||
      (!item.type && item.prop)
    "
  >
    <el-form-item
      v-if="!item.isShowCallBack || item.isShowCallBack()"
      :class="item.className"
      :label="item.label"
      :prop="item.prop"
      :style="{
        flex: setFlex(item)
      }"
    >
      <template #label v-if="item.infoShow">
        {{ item.label }}
        <el-tooltip class="box-item" :content="item.infoContent" effect="dark" placement="top-start">
          <div class="form-item-description">
            <el-icon><InfoFilled /></el-icon>
          </div>
        </el-tooltip>
      </template>
      <el-input
        v-model="form[keys.slice(-1)]"
        clearable
        :disabled="(item.disableField && item.disableField()) ?? item.disabled"
        :maxlength="item.maxlength"
        :minlength="item.minlength"
        :placeholder="item.placeholder || '请输入' + item.label"
        :readonly="(item.readonlyField && item.readonlyField()) ?? item.readonly"
        :rows="item.rows || 2"
        :show-word-limit="isShowWordLimit"
        :type="item.type || 'text'"
        @change="onHandleChange(item, $event)"
      />
    </el-form-item>
  </template>
  <template v-if="item.type === TableColumnOrFormTypeEnum.INPUTNUMBER">
    <el-form-item
      v-if="!item.isShowCallBack || item.isShowCallBack()"
      :class="item.className"
      :label="item.label"
      :label-width="item.labelWidth"
      :prop="item.prop"
      :style="{
        flex: setFlex(item)
      }"
    >
      <template #label v-if="item.infoShow">
        {{ item.label }}
        <el-tooltip class="box-item" :content="item.infoContent" effect="dark" placement="top-start">
          <div class="form-item-description">
            <el-icon><InfoFilled /></el-icon>
          </div>
        </el-tooltip>
      </template>
      <el-input-number
        v-model="form[keys.slice(-1)]"
        clearable
        :controls="false"
        :disabled="(item.disableField && item.disableField()) ?? item.disabled"
        :max="item.max"
        :min="item.min"
        :placeholder="item.placeholder || '请输入' + item.label"
        :precision="item.precision == 0 ? 0 : item.precision || 2"
        :readonly="(item.readonlyField && item.readonlyField()) ?? item.readonly"
        @change="onHandleChange(item, $event)"
      />
    </el-form-item>
  </template>
  <template v-if="item.type === TableColumnOrFormTypeEnum.RADIO">
    <el-form-item
      v-if="!item.isShowCallBack || item.isShowCallBack()"
      :class="item.className"
      :label="item.label"
      :prop="item.prop"
      :style="{
        flex: setFlex(item)
      }"
    >
      <template #label v-if="item.infoShow">
        {{ item.label }}
        <el-tooltip class="box-item" :content="item.infoContent" effect="dark" placement="top-start">
          <div class="form-item-description">
            <el-icon><InfoFilled /></el-icon>
          </div>
        </el-tooltip>
      </template>
      <CommonRadio
        v-model="form[keys.slice(-1)]"
        :dict-code="item.dictCode"
        :dict-url="item.dictUrl"
        :disabled="(item.disableField && item.disableField()) ?? item.disabled"
        :opition-list="item.opitionList"
        :readonly="(item.readonlyField && item.readonlyField()) ?? item.readonly"
        @change="onHandleChange(item, $event)"
      />
    </el-form-item>
  </template>

  <template v-if="item.type === TableColumnOrFormTypeEnum.CHECKBOX">
    <el-form-item
      v-if="!item.isShowCallBack || item.isShowCallBack()"
      :class="item.className"
      :label="item.label"
      :prop="item.prop"
      :style="{
        flex: setFlex(item)
      }"
    >
      <template #label v-if="item.infoShow">
        {{ item.label }}
        <el-tooltip class="box-item" :content="item.infoContent" effect="dark" placement="top-start">
          <div class="form-item-description">
            <el-icon><InfoFilled /></el-icon>
          </div>
        </el-tooltip>
      </template>
      <CommonCheckbox
        v-model="form[keys.slice(-1)]"
        :dict-code="item.dictCode"
        :dict-url="item.dictUrl"
        :valToStr="item.valToStr"
        :disabled="(item.disableField && item.disableField()) ?? item.disabled"
        :opition-list="item.opitionList"
        :readonly="(item.readonlyField && item.readonlyField()) ?? item.readonly"
        @change="onHandleChange(item, $event)"
      />
    </el-form-item>
  </template>
  <template v-if="item.type === TableColumnOrFormTypeEnum.SWITCH">
    <el-form-item
      v-if="!item.isShowCallBack || item.isShowCallBack()"
      :class="item.className"
      :label="item.label"
      :label-width="item.labelWidth"
      :prop="item.prop"
      :style="{
        flex: setFlex(item)
      }"
    >
      <template #label v-if="item.infoShow">
        {{ item.label }}
        <el-tooltip class="box-item" :content="item.infoContent" effect="dark" placement="top-start">
          <div class="form-item-description">
            <el-icon><InfoFilled /></el-icon>
          </div>
        </el-tooltip>
      </template>
      <CommonSwitch
        v-model="form[keys.slice(-1)]"
        :active-value="item.activeValue"
        :disabled="(item.disableField && item.disableField()) ?? item.disabled"
        :inactive-value="item.inactiveValue"
        @change="onHandleChange(item, $event)"
      />
    </el-form-item>
  </template>
  <template v-if="item.type === TableColumnOrFormTypeEnum.SELECT">
    <el-form-item
      v-if="!item.isShowCallBack || item.isShowCallBack()"
      :class="item.className"
      :label="item.label"
      :prop="item.prop"
      :style="{
        flex: setFlex(item)
      }"
    >
      <template #label v-if="item.infoShow">
        {{ item.label }}
        <el-tooltip class="box-item" :content="item.infoContent" effect="dark" placement="top-start">
          <div class="form-item-description">
            <el-icon><InfoFilled /></el-icon>
          </div>
        </el-tooltip>
      </template>
      <CommonSelect
        v-model="form[keys.slice(-1)]"
        :collapse-tags="false"
        :dict-code="item.dictCode"
        :dict-url="item.dictUrl"
        :disabled="(item.disableField && item.disableField()) ?? item.disabled"
        :multiple="item.multiple"
        :opition-list="item.opitionList"
        :placeholder="item.placeholder || '请选择' + item.label"
        :readonly="(item.readonlyField && item.readonlyField()) ?? item.readonly"
        @change="onHandleChange(item, $event)"
      />
    </el-form-item>
  </template>
  <template v-if="item.type === TableColumnOrFormTypeEnum.SELECTTREE">
    <el-form-item
      v-if="!item.isShowCallBack || item.isShowCallBack()"
      :class="item.className"
      :label="item.label"
      :prop="item.prop"
      :style="{
        flex: setFlex(item)
      }"
    >
      <template #label v-if="item.infoShow">
        {{ item.label }}
        <el-tooltip class="box-item" :content="item.infoContent" effect="dark" placement="top-start">
          <div class="form-item-description">
            <el-icon><InfoFilled /></el-icon>
          </div>
        </el-tooltip>
      </template>
      <template v-if="item.multiple">
        <SelectVxeTreeMany
          v-model="form[keys.slice(-1)]"
          :disabled="formConfigDisabled || ((item.disableField && item.disableField()) ?? item.disabled)"
          :expand-level="item.expandLevel"
          :placeholder="item.placeholder || '请选择' + item.label"
          :readonly="formConfigDisabled || ((item.readonlyField && item.readonlyField()) ?? item.disabled)"
          :searchable="item.treesearchable"
          :url="item.dictUrl"
          :queryForm="item.queryForm"
          @on-change="onHandleChange(item, $event)"
        />
      </template>
      <template v-else>
        <SelectVxeTreeOne
          v-model="form[keys.slice(-1)]"
          :disabled="formConfigDisabled || ((item.disableField && item.disableField()) ?? item.disabled)"
          :expand-level="item.expandLevel"
          :placeholder="item.placeholder || '请选择' + item.label"
          :readonly="formConfigDisabled || ((item.readonlyField && item.readonlyField()) ?? item.disabled)"
          :searchable="item.treesearchable"
          :url="item.dictUrl"
          :queryForm="item.queryForm"
          @on-change="onHandleChange(item, $event)"
        />
      </template>
    </el-form-item>
  </template>
  <template v-if="item.type === TableColumnOrFormTypeEnum.DATE">
    <el-form-item
      v-if="!item.isShowCallBack || item.isShowCallBack()"
      :class="item.className"
      :label="item.label"
      :prop="item.prop"
      :style="{
        flex: setFlex(item)
      }"
    >
      <template #label v-if="item.infoShow">
        {{ item.label }}
        <el-tooltip class="box-item" :content="item.infoContent" effect="dark" placement="top-start">
          <div class="form-item-description">
            <el-icon><InfoFilled /></el-icon>
          </div>
        </el-tooltip>
      </template>
      <CommonDatePicker
        v-model="form[keys.slice(-1)]"
        v-model:subName="form[subKeys.slice(-1)]"
        :date-format="item.dateFormat || 'YYYY-MM-DD'"
        :date-value-formate="item.dateValueFormate || 'YYYY-MM-DD'"
        :disabled="(item.disableField && item.disableField()) ?? item.disabled"
        :end-placeholder="item.endPlaceholder"
        :placeholder="item.placeholder"
        :readonly="(item.readonlyField && item.readonlyField()) ?? item.readonly"
        :start-placeholder="item.startPlaceholder"
        :type="item.dateType || 'date'"
        @change="onHandleChange(item, $event)"
      />
      <!-- <el-date-picker
        v-model="form[keys.slice(-1)]"
        :disabled="item.disabled"
        :end-placeholder="item.endPlaceholder || '请选择结束' + item.label"
        :format="item.dateFormat || 'YYYY-MM-DD'"
        :placeholder="item.placeholder || '请选择' + item.label"
        :readonly="item.readonly"
        :start-placeholder="item.startPlaceholder || '请选择开始' + item.label"
        :type="item.dateType || 'date'"
        :value-format="item.dateValueFormate || 'YYYY-MM-DD'"
      /> -->
    </el-form-item>
  </template>
  <template v-if="item.type === TableColumnOrFormTypeEnum.CASCADER">
    <el-form-item
      v-if="!item.isShowCallBack || item.isShowCallBack()"
      :class="item.className"
      :label="item.label"
      :prop="item.prop"
      :style="{
        flex: setFlex(item)
      }"
    >
      <template #label v-if="item.infoShow">
        {{ item.label }}
        <el-tooltip class="box-item" :content="item.infoContent" effect="dark" placement="top-start">
          <div class="form-item-description">
            <el-icon><InfoFilled /></el-icon>
          </div>
        </el-tooltip>
      </template>
      <CommonCascader
        v-model="form[keys.slice(-1)]"
        :disabled="(item.disableField && item.disableField()) ?? item.disabled"
        :placeholder="item.placeholder || '请选择' + item.label"
        :readonly="(item.readonlyField && item.readonlyField()) ?? item.readonly"
        :url="item.dictUrl"
        @change="onHandleChange(item, $event)"
      />
    </el-form-item>
  </template>
  <template v-if="item.type === TableColumnOrFormTypeEnum.MONEYINPUT">
    <el-form-item
      v-if="!item.isShowCallBack || item.isShowCallBack()"
      :class="item.className"
      :label="item.label"
      :prop="item.prop"
      :style="{
        flex: setFlex(item)
      }"
    >
      <template #label v-if="item.infoShow">
        {{ item.label }}
        <el-tooltip class="box-item" :content="item.infoContent" effect="dark" placement="top-start">
          <div class="form-item-description">
            <el-icon><InfoFilled /></el-icon>
          </div>
        </el-tooltip>
      </template>
      <CommonMoneyInput
        v-model="form[keys.slice(-1)]"
        :disabled="(item.disableField && item.disableField()) ?? item.disabled"
        :placeholder="item.placeholder || '请输入' + item.label"
        :readonly="(item.readonlyField && item.readonlyField()) ?? item.readonly"
        @handle-blur="onHandleChange(item, $event)"
      />
    </el-form-item>
  </template>
  <template v-if="item.type === TableColumnOrFormTypeEnum.DIVIDER">
    <el-divider content-position="left">{{ item.label }}</el-divider>
  </template>
</template>

<script>
import { TableColumnOrFormTypeEnum } from "@/plugins/commonType.enum.ts";
import CommonRadio from "./components/CommonRadio.vue";
import CommonCheckbox from "./components/CommonCheckbox.vue";
import CommonDatePicker from "@/plugins/form/components/CommonDatePicker.vue";
import CommonSelect from "./components/CommonSelect.vue";
import SelectVxeTreeOne from "@/plugins/tree/SelectVxeTreeOne.vue";
import SelectVxeTreeMany from "@/plugins/tree/SelectVxeTreeMany.vue";
import CommonMoneyInput from "./components/CommonMoneyInput.vue";
import CommonCascader from "./components/CommonCascader.vue";
import CommonSwitch from "@/plugins/form/components/CommonSwitch.vue";
import { InfoFilled } from "@element-plus/icons-vue";
export default defineComponent({
  name: "CommonFormItem",
  components: {
    CommonRadio,
    CommonCheckbox,
    CommonSelect,
    SelectVxeTreeOne,
    SelectVxeTreeMany,
    CommonMoneyInput,
    CommonCascader,
    CommonSwitch,
    InfoFilled,
    CommonDatePicker
  },
  props: {
    modelValue: {
      type: Object,
      default: () => {
        return {};
      }
    },
    setFlex: {
      type: Function,
      default: () => {
        return () => {};
      }
    },
    item: {
      type: Object,
      default: () => {
        return {};
      }
    },
    formConfigDisabled: {
      type: Boolean,
      default: false
    }
  },

  emits: { "update:model-value": null, "on-handle-change-value": null },

  setup(props, { emit }) {
    const isShowWordLimit = computed(() => {
      const { showWordLimit, type, maxlength } = props.item;
      const isNotHasValue = showWordLimit ?? true;
      if (!isNotHasValue || showWordLimit) {
        return showWordLimit;
      }
      if (!showWordLimit && isNotHasValue) {
        return type === TableColumnOrFormTypeEnum.TEXTAREA && !!maxlength;
      }
    });

    const keys = computed(() => {
      const keyArray = props.item.prop?.split(".") || [];
      return keyArray;
    });

    /**
     * 日期组件range第二个参数
     */
    const subKeys = computed(() => {
      const keyArray = props.item.subProp?.split(".") || [];
      return keyArray;
    });

    const getObjectKeyValue = () => {
      if (!keys.value || !keys.value.length) return;
      const { modelValue } = props;
      const currentKeys = keys.value.slice(0, -1);
      if (!currentKeys || !currentKeys.length) {
        return modelValue;
      }
      const currentForm = currentKeys.reduce((pre, cur) => {
        return pre ? pre[cur] : undefined;
      }, modelValue);
      return currentForm;
    };

    const form = ref(getObjectKeyValue());

    const onHandleChange = (item, $event) => {
      const params = { ...item, $event };
      emit("on-handle-change-value", params);
    };

    watch(
      () => props.modelValue,
      () => {
        form.value = getObjectKeyValue();
      },
      {
        deep: true
      }
    );

    return {
      keys,
      subKeys,
      form,
      isShowWordLimit,
      TableColumnOrFormTypeEnum,
      onHandleChange
    };
  }
});
</script>

<style lang="scss" scoped>
.form-item-description {
  display: flex;
  align-items: center;
  height: 100%;
  margin: 0 0 0 3px;
}
</style>
